<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box" class="aaa" style="">box</div>
    <script>
        // dom 节点
        /*
            dom对象，也叫dom节点，一般情况都是页面中一个标签，也叫元素节点
                实际上dom的节点--比较常见的分为三大类
                    1-元素节点（dom对象）
                        document.querySelector('css选择器')
                        document.querySelectorAll('css选择器')
                        nodeType 1
                        nodeName  大写标签名
                        nodeValue null
                    2-属性节点（dom对象）
                        获取属性节点对象(用的很少)
                        nodeType 2
                        nodeName  属性名
                        nodeValue 属性值
                    3-文本节点（dom对象）
                        nodeType 3
                        nodeName  #text
                        nodeValue 文本内容

               一般情况下 获取元素节点以后，通过元素节点 可以直接操作 属性和文本
               ---很少直接获取 属性节点对象和文本节点对象
        */


        //先获取元素节点对象
        var box = document.querySelector("#box");

        // 获取属性节点对象-伪数组
        console.log(box.attributes);
        //获取id属性节点对象
        console.log(box.attributes[0]);
        // 属性节点对象
        // nodeName  节点名
        // nodeValue  节点值
        console.log(box.attributes[0].nodeName);// id  属性名
        console.log(box.attributes[0].nodeValue);//box  属性值
        console.log(box.attributes[0].nodeType);//2 用于判断节点类型

        console.log(box.attributes[1]);//


        // 文本节点对象
        // console.log(box.innerHTML);
        // console.log(box.innerText);

        //元素的所有孩子节点（对象）
        console.log(box.childNodes);
        //第一个孩子节点--文本对象
        console.log(box.childNodes[0]);
        console.log(box.childNodes[0].nodeName);//#text
        console.log(box.childNodes[0].nodeType);//3--判断是否是文本节点
        console.log(box.childNodes[0].nodeValue);//文本内容 box



        // 元素节点对象
        console.log(box.nodeName);//标签名-大写的，，DIV
        console.log(box.tagName);//标签名-大写的，，DIV
        console.log(box.nodeValue);//null
        console.log(box.nodeType);//1



    </script>

</body>

</html>